<template>
    <!-- pages/redenvelope/giveredenvelope/index.wxml -->
    <view class="pages">
        <view class="moneynum">￥{{ num * gross }}</view>
        <view class="flexbox-sb">
            <!-- <view bindtap="onShowPopup" class="title">
      <text>{{title}}</text>
      <van-icon name="arrow-down" size="10px" color="#FF8722" />
    </view> -->
            <view></view>
        </view>
        <view class="flexbox-sb numbox">
            <view class="text1 centers">红包个数</view>
            <view class="centers">
                <input type="number" placeholder-class="placeholder-class" class="weui-input mr-10" maxlength="3" placeholder="最多100" @input="getNum" :value="num" />
                <view class="text1">个</view>
            </view>
        </view>
        <view class="flexbox-sb grossbox">
            <view class="centers">
                <!-- <view class="r-box mr-10" wx:if="{{title == '普通包'}}">普</view>
      <view class="r-box mr-10" wx:if="{{title == '拼手气'}}">拼</view> -->
                <view class="text1">单个金额</view>
            </view>
            <view class="centers">
                <input type="number" placeholder-class="placeholder-class" class="weui-input mr-10" maxlength="3" placeholder="单个红包最高200" @input="getGross" :value="gross" />
                <view class="text1">元</view>
            </view>
        </view>
        <view class="titlebox mt-20">
            <view class="text1">红包标题</view>
            <textarea placeholder-class="text3" placeholder="我在意约发了个大红包，快来抢吧！" class="textarea mt-30" maxlength="20" @input="bindinput" :value="rdtitle"></textarea>
            <view class="text-num">{{ rdtitle.length }}/20</view>
        </view>
        <view class="moneybtn" @tap="onGorge">发红包</view>
        <view class="text3 mt-20 text-center">24小时未领取的红包，将直接退回您的意约账户余额！</view>
        <view class="text3 t-center">
            点击发红包按钮表示已同意并遵守
            <view>
                《
                <text class="text-c" @tap.stop.prevent="toUseragreement">用户协议</text>
                》和 《
                <text class="text-c" @tap.stop.prevent="toPrivacypolicy">隐私条款</text>
                》
            </view>
        </view>
        <van-overlay :show="overlayshow" @click="onClickHide">
            <view class="wrapper">
                <view class="wrapperbox">
                    <image class="give-bg" src="/static/images/redboxs.png"></image>
                    <view class="give-text1">
                        <view>{{ redbagData.title }}</view>
                        <!-- <view>快来抢吧~</view> -->
                    </view>
                    <view class="give-text2">￥{{ redbagData.totalamount }}</view>
                    <view class="give-text3">{{ title }}，共{{ redbagData.grantquantity }}个！</view>
                    <button open-type="share" :data-id="redbagData.id" class="hb-btn">
                        <image class="btnimg" :src="imgUrl + 'hb-btn.png'"></image>
                        <text>去分享</text>
                    </button>
                    <view class="icon" @tap.stop.prevent="onClickHide">
                        <van-icon name="close" size="60rpx" color="white" />
                    </view>
                </view>
            </view>
        </van-overlay>
        <van-popup :show="show" round position="bottom" custom-style="height: 250px" @close="onClose" close-icon="cross" closeable>
            <view class="pbox mt-100">
                <van-picker show-toolbar title="标题" :columns="showList" @cancel="onCancel" @change="onChange" :show-toolbar="false" custom-class="pbox" visible-item-count="2" />
                <view class="btn" @tap="onClose">确定</view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// pages/redenvelope/giveredenvelope/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            show: false,

            showList: ['普通包', '拼手气'],
            title: '普通包',
            cursor: 0,
            num: '',
            gross: '',
            rdtitle: '',
            overlayshow: false,

            redbagData: {
                title: '',
                totalamount: '',
                grantquantity: '',
                id: ''
            },

            invitecode: '',
            titleClone: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.invitecode) {
            uni.setStorageSync('code', options.invitecode);
        } // 获取邀请码

        _request
            .get('/recomUser/findReCode', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    invitecode: res.data.data.invitecode
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // this.setData({
        //   overlayshow: app.globalData.overlayshow
        // })
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
        app.globalData.overlayshow = false;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {
        let redbagId = res.target.dataset.id;
        let userid = uni.getStorageSync('userid');
        const { invitecode } = this; // 设置菜单中的转发按钮触发转发事件时的转发内容

        if (res.from === 'button') {
            // 来自页面内转发按钮
        }

        let a = '/pages/redenvelope/index?template=7&share=BAGRED&userId=' + userid + '&redbagId=' + redbagId + '&invitecode=' + invitecode;
        return {
            title: '我在意约发了个大红包！',
            // 默认是小程序的名称
            path: '/pages/redenvelope/index?template=7&share=BAGRED&userId=' + userid + '&redbagId=' + redbagId + '&invitecode=' + invitecode,
            imageUrl: '/static/images/hblogo.png',
            success: function (res) {}
        };
    },
    methods: {
        // 点击展示
        onShowPopup() {
            this.setData({
                show: true
            });
        },

        // 关闭窗口
        onClose() {
            this.setData({
                show: false
            });
        },

        // 获取红包类型
        onChange(event) {
            const { picker, value, index } = event.detail;
            this.setData({
                title: value
            });
        },

        // 标题输入
        bindinput(e) {
            if (this.rdtitle.length > 19 || e.detail.value.length > 19) {
                this.setData({
                    cursor: e.detail.value,
                    rdtitle: e.detail.value.substring(0, 20)
                });
            } else {
                this.setData({
                    cursor: e.detail.value,
                    rdtitle: e.detail.value
                });
            }
        },

        // 获取红包数量
        getNum(e) {
            let value = this.validateNumber(e.detail.value);

            if (e.detail.value.substr(0, 1) == 0 && value.length == 1) {
                value = value.replace(/[^0-9-]+/, '');

                if (value < 1) {
                    value = 1;
                }

                this.setData({
                    num: value
                });
            } else {
                this.setData({
                    num: value > 100 ? 100 : value
                });
            }
        },

        // 获取红包金额
        getGross(e) {
            let value = this.validateNumber(e.detail.value);

            if (e.detail.value.substr(0, 1) == 0 && value.length == 1) {
                value = value.replace(/[^0-9-]+/, '');

                if (value < 1) {
                    value = 1;
                }

                this.setData({
                    gross: value
                });
            } else {
                this.setData({
                    gross: value > 200 ? 200 : value
                });
            }
        },

        // 过滤
        validateNumber(val) {
            return val.replace(/\D/g, '');
        },

        // 去塞钱
        onGorge() {
            const { num, gross, rdtitle, title } = this;

            if (!num || num < 1) {
                return uni.showToast({
                    title: '请设置红包数量',
                    icon: 'none',
                    duration: 1000
                });
            } else if (!gross || gross < 1) {
                return uni.showToast({
                    title: '请设置红包金额',
                    icon: 'none',
                    duration: 1000
                });
            } else {
                const data = {
                    grantquantity: num,
                    pathList: [],
                    sendUserId: uni.getStorageSync('userid'),
                    singleamount: gross,
                    title: rdtitle ? rdtitle : '我在意约发了个大红包，快来抢吧！',
                    totalamount: num * gross,
                    userId: uni.getStorageSync('userid'),
                    wishwords: '',
                    type: title == '普通包' ? 0 : 1
                };

                _request
                    .postObj('/redbagShare/create', { ...data })
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.setData({
                                redbagData: res.data.data
                            });
                            app.globalData.overlayshowdata = res.data.data;
                            let obj = JSON.stringify(res.data.data);
                            uni.redirectTo({
                                url: '/pages/redenvelope/giveredenvelope/pay/index?data=' + encodeURIComponent(obj)
                            }); // this.setData({
                            //   overlayshow: true
                            // })
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 1000
                            });
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }
        },

        // 点击关闭红包页
        onClickHide() {
            uni.switchTab({
                url: '/firstpages/my/index'
            }); // wx.redirectTo({
            //   url: '/pages/redenvelope/index',
            // })
        },

        // 查看隐私条款
        toPrivacypolicy() {
            uni.navigateTo({
                url: '/pages/aboutus/privacypolicy/index'
            });
        },

        // 查看用户协议
        toUseragreement() {
            uni.navigateTo({
                url: '/pages/aboutus/useragreement/index'
            });
        },

        onCancel() {
            console.log('占位：函数 onCancel 未声明');
        }
    }
};
</script>
<style>
/* pages/redenvelope/giveredenvelope/index.wxss */
.pages {
    padding: 0 20rpx;
}
.moneynum {
    text-align: center;
    font-size: 80rpx;
    font-weight: bold;
    color: #333333;
    padding: 80rpx 0;
}
.title {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff8722;
    margin-right: 5rpx;
    padding: 20rpx 0;
}

.numbox {
    width: 710rpx;
    height: 85rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.grossbox {
    margin-top: 20rpx;
    width: 710rpx;
    height: 85rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.text1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 28rpx;
}

.text2 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.text3 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.text-c {
    color: #ff8722;
}

.r-box {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background: #ff8722;
    font-size: 24rpx;
    line-height: 30rpx;
    text-align: center;
    color: #fff;
}

.weui-input {
    text-align: right;
}

.placeholder-class {
    text-align: right;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.t-center {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30rpx;
}

.titlebox {
    width: 710rpx;
    height: 324rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    position: relative;
    padding: 30rpx 0 0 20rpx;
    box-sizing: border-box;
}

.text-num {
    position: absolute;
    bottom: 10rpx;
    right: 10rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.textarea {
    width: 690rpx;
    z-index: 1;
}

.moneybtn {
    width: 670rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    line-height: 90rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    text-align: center;
    margin: 115rpx 20rpx 0 20rpx;
}

/* 弹窗 */
.pbox {
    height: 110rpx;
    box-sizing: border-box;
}

.btn {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 80rpx;
    text-align: center;
}

.van-picker {
    height: 110rpx !important;
}

/* 红包弹窗 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    width: 596rpx;
    height: 523rpx;
    position: relative;
    top: -120rpx;
    left: 0;
    display: flex;
    justify-content: center;
    text-align: center;
}

.give-bg {
    width: 596rpx;
    height: 523rpx;
    position: absolute;
}

.give-text1 {
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
    width: 50%;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ea4a34;
    line-height: 32rpx;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 40rpx;
    margin: 0 auto;
}

.give-text2 {
    width: 100%;
    text-align: center;
    font-size: 72rpx;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ea4a34;
    line-height: 35rpx;
    position: absolute;
    z-index: 3;
    top: 157rpx;
}

.give-text3 {
    width: 100%;
    text-align: center;
    font-size: 18rpx;
    font-family: PingFang SC;

    font-weight: 500;
    color: #ea4a34;
    line-height: 35rpx;
    position: absolute;
    z-index: 3;
    top: 304rpx;
}

button {
    font: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: unset !important;
    text-align: inherit !important;
    /* width: unset !important; */
    color: inherit !important;
    /* position: initial !important; */
    box-sizing: inherit !important;
    border: unset !important;
    min-height: unset !important;
    display: block !important;
}

button::after {
    display: none;
}

.hb-btn {
    z-index: 3;
    width: 357rpx;
    height: 87rpx;
    position: absolute;
    top: 414rpx;
}

.hb-btn text {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 68rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #9b4f00;
    font-size: 34rpx;
}

.btnimg {
    width: 357rpx;
    height: 87rpx;
}

.icon {
    position: absolute;
    bottom: -140rpx;
    z-index: 3;
}
</style>
